html,
      body {
        width: 100%;
        font-family: arial;
      }
      body,
      p,
      ul {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      #container {
        position: relative;
        width: 600px;
        height: 500px;
        margin: 20px auto;
        background-color: rgb(226, 232, 249);
        box-shadow: 0 0 15px #ccc;
        transition-duration: 0.3s;
      }
      #head {
        width: 100%;
        height: 40px;
        background-color: rgb(141, 165, 232);
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      /* 好友框 */
      #friends-box {
        box-sizing: border-box;
        position: absolute;
        right: 0;
        top: 40px;
        width: 160px;
        height: 460px;
        overflow-y: auto;
      }
      #friends-box p {
        font-size: 14px;
        /* background-color: #ccc; */
        line-height: 40px;
        padding-left: 10px;
      }
      ul#friend-list {
        font-size: 13px;
      }
      ul#friend-list li {
        box-sizing: border-box;
        width: 100%;
        height: 28px;
        padding-left: 10px;
        cursor: default;
      }
      ul#friend-list li:hover {
        background-color: rgb(217, 222, 239);
      }
      ul#friend-list li em {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        border-radius: 50%;
        border: 1px solid #ccc;
      }
      ul#friend-list li span {
        display: inline-block;
        vertical-align: middle;
        line-height: 28px;
        text-indent: 5px;
      }
      /* 发送框 */
      #send-box {
        position: relative;
        box-sizing: border-box;
        width: 440px;
        height: calc(100% - 40px - 325px);
        padding-top: 10px;
        padding-left: 10px;
        border-right: 1px solid rgba(204, 204, 204, 0.5);
        overflow: hidden;
      }
      #send-box textarea {
        display: block;
        width: 100%;
        height: 70%;
        border: none;
        outline: none;
        background-color: rgb(226, 232, 249);
        font-size: 12px;
        font-family: arial;
        resize: none;
      }
      #send-box .function {
        width: 100%;
        height: 25%;
        font-size: 10px;
      }
      .function .look {
        width: 30px;
        height: 30px;
        padding-top: 4px;
        text-align: center;
      }
      .function .look img {
        width: 24px;
        height: 24px;
      }
      .function .look:hover {
        background-color: rgb(213, 219, 235);
      }
      #send-box button {
        width: 70px;
        height: 28px;
        border: 0;
        border-radius: 3px;
        outline: none;
        font-size: 12px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
      }
      #send-box button[name="close"] {
        background-color: rgb(235, 239, 251);
        border: 1px solid rgb(182, 189, 203);
        margin-right: 10px;
      }
      #send-box button[name="close"]:hover {
        background-color: rgb(239, 239, 240);
      }
      #send-box button[name="send"] {
        background-color: rgb(141, 165, 232);
        border: 1px solid rgb(141, 165, 232);
      }
      #send-box button[name="send"]:hover {
        background-color: rgb(166, 184, 237);
      }
      .btn {
        position: absolute;
        bottom: 15px;
        right: 15px;
      }
      /* 聊天记录框 */
      #record-box {
        position: relative;
        box-sizing: border-box;
        width: 440px;
        height: 325px;
        padding: 10px 10px 0 10px;
        border-bottom: 1px solid rgba(204, 204, 204, 0.5);
        border-right: 1px solid rgba(204, 204, 204, 0.5);
        overflow-y: auto;
        color: #555;
        font-size: 12px;
      }
      #record-box > div {
        position: relative;
        width: 100%;
        margin-top: 10px;
      }
      .left-photo {
        left: 0;
      }
      .left-say {
        margin-left: 40px;
      }
      .left-name {
        margin-left: 40px;
      }
      .right-div {
        text-align: right;
      }
      .right-photo {
        right: 0;
      }
      .right-name {
        margin-right: 40px;
      }
      .right-say {
        margin-right: 40px;
      }
      #record-box em.photo {
        position: absolute;
        top: 0;
        width: 30px;
        height: 30px;
        background-color: #ccc;
        border-radius: 50%;
      }
      #record-box span.name {
        display: block;
        margin-bottom: 5px;
        font-size: 10px;
      }
      #record-box span.say {
        box-sizing: border-box;
        display: inline-block;
        max-width: 80%;
        padding: 5px;
        border-radius: 8px;
        background-color: rgb(203, 208, 223);
        font-size: 14px;
        line-height: 20px;
        text-align: left;
      }
      #addInfo {
        position: fixed;
        top: 0;
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #ccc;
      }
      p#agin {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: auto;
        color: #ccc;
        font-size: 26px;
        text-align: center;
        line-height: 400px;
      }
      .redColor {
        color: red;
      }